<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //对话框
            $("#checkId").click(function () {
                // var val = $("#uname").val();
                // $.ajax({
                //     url: "/ajax/JqueryUserServlet",
                //     data: {
                //         "uname": $("#uname").val(),
                //         "date": new Date()
                //     },
                //     error: function () {
                //         console.log("失败")
                //     },
                //     success: function (xhr, status, data) {
                //         var user = JSON.stringify(data.responseJSON);
                //         $("#div1").innerHTML = user;
                //       
                //         console.log("user",user)
                //         //修改myres的值
                //         //修改div1的值
                //         if (data.name == " ") {
                //             $("#myres").val("用户名可用")
                //         } else {
                //             $("#myres").val("用户名不可用")
                //         }
                //      
                //     },
                //     dataType:"json"
                //
                // });


                // $.get(
                //     "/ajax/JqueryUserServlet",
                //     {
                //             "uname": $("#uname").val(),
                //             "date": new Date()
                //         },
                //     function (xhr, status, data) {
                //                 var user = JSON.stringify(data.responseJSON);
                //                 $("#div1").html(user)
                //
                //                 console.log("user", user)
                //         alert(data.responseJSON.name)
                //                 //修改myres的值
                //                 //修改div1的值
                //                 if (data.responseJSON.name == "") {
                //                     $("#myres").val("get()用户名可用")
                //                 } else {
                //                     $("#myres").val("get()用户名不可用")
                //                 }
                //             },
                //     "json" 
                // )


                // $.post(
                //         "/ajax/JqueryUserServlet",
                //         {
                //                 "uname": $("#uname").val(),
                //                 "date": new Date()
                //             },
                //         function (xhr, status, data) {
                //                     var user = JSON.stringify(data.responseJSON);
                //                     $("#div1").html(user)
                //
                //                     console.log("user", user)
                //             alert(data.responseJSON.name)
                //                     //修改myres的值
                //                     //修改div1的值
                //                     if (data.responseJSON.name == "") {
                //                         $("#myres").val("post()用户名可用")
                //                     } else {
                //                         $("#myres").val("post()用户名不可用")
                //                     }
                //                 },
                //         "json"  
                // )


                $.getJSON(
                    "/ajax/JqueryUserServlet",
                    {
                        "uname": $("#uname").val(),
                        "date": new Date()
                    },
                    function (data, status, xhr) {
                        console.log("data", data)
                        var user = JSON.stringify(data);
                        $("#div1").html(user)

                        console.log("user", user)
                        alert(data.name)
                        //修改myres的值
                        //修改div1的值
                        if (data.name == "") {
                            $("#myres").val("getJSON()用户名可用")
                        } else {
                            $("#myres").val("getJSON()用户名不可用")
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册JQUERY-AJAX</h1>
<form action="/ajax/JqueryUserServlet" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkId" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/><input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>